<!DOCTYPE html>
<head>
    <title>ToDoList</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="width-device-width,initial-scale=1"/>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body id="back">
    <!-- main part -->
    <section id="app">
        <!-- input box -->
        <header class="header" aria-orientation="vertical">
            <!-- <input type="file" value="TodoList"/> -->
            <h1>TodoList</h1>
            <div>
                <input placeholder="Task to do:"
                    autofocus="autofocus" autocomplete="off" 
                    @keyup.enter="addList" v-model="element" class=""/>
            </div>
            <!-- <input type="file" @click="readList" id="inputFile"> -->
            <!-- <input type="button" @click="load" value="load"/> -->
        </header>
        <div aria-orientation="horizontal">

        
        <!-- reload data -->
        <!-- list part -->
            <article class="nav">
                <header>
                    <!-- <input type="button" @click="readList" v-if="isRead" value="load"/> -->
                    <!-- <input type="button" @click="saveList" value="save"/> -->
                    <h2>Items:</h2>
                </header>
                <div>
                    <ul>
                        <li v-for="(item,index) in reverseList">
                            <span>{{ item.name }}</span>
                            <label>{{ item.time }}</label>
                            <button @click="removeList(index)">X</button>
                        </li>
                    </ul>
                </div>
                <footer v-show="list.length!=0">
                    <span>
                        <strong>{{ list.length }}</strong> items left
                    </span>
                    <button @click="clear">Clear</button>
                </footer>
                <footer v-show="list.length==0">
                    <h3> have no items now</h3>
                </footer>
            </article>
            <aside class="section">
                <section>
                    <h2 class="normal">Notice Playground</h2>
                    <pre v-show="!infoChange">{{ info }}</pre>
                    <textarea ref="inputVal" rows="24" cols="42"  v-show="infoChange" 
                        v-model="preInfo"  @keyup.esc="desCancel"
                        ></textarea>
                    <button @click="showText" v-show="!infoChange">Edit</button>
                    <button @click="setInfo" v-show="infoChange">save</button>
                    <button @click="clearInfo" v-show="!infoChange">Clear</button>
                </section>
            </aside>
            <div aria-orientation="vertical" class="right">
                <h2 class="Emergency" @click="saveEmerge">Emergency</h2>
                <div>
                    <textarea cols="42" rows="30" ref="EmergeEvent"
                        @dblclick="saveEmerge" v-model="emerge" v-show="EF"></textarea>
                    <pre @dblclick="saveEmerge" v-show="!EF" class="normal">
                        {{ emerge }}
                    </pre>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div @click="BottomMsg" v-show="BFlag">{{bottom}}</div>
            <input type="text" :placeholder="bottom" ref="inputBot"
                @keyup.enter="BotSet" @keyup.esc="BotReset" v-show="!BFlag" v-model="BPre"/>
        </footer>
        <!-- <button @click="toJson" value="json">111{{json}}</button> -->
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>